import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { ArtistPage } from "./style";
import ArtiseLeft from "./artist-left";
import ArtiseRight from "./artist-right";
import {
  artistInformationAction,
  getArtistSimiAction,
} from "./store/actionTypes";
import NavigationWrap from "../../components/navigation";
import Loading from "@/components/loading";

export default memo(function Artist(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(artistInformationAction(props.location.search.split("=")[1]));
  }, [dispatch, props.location.search]);

  const state = useSelector(
    (state) => ({
      artistInformations: state.getIn(["artistPage", "artistInformations"]),
    }),
    shallowEqual
  );

  return state.artistInformations.artist ? (
    <ArtistPage>
      <NavigationWrap />
      <div className="artist-box wrap-v2">
        <ArtiseLeft
          location={props.location}
          id={props.location.search.split("=")[1]}
          info={state.artistInformations}
        />
        <ArtiseRight id={props.location.search.split("=")[1]} />
      </div>
    </ArtistPage>
  ) : (
    <div className="l-cover">
      <Loading />
    </div>
  );
});
